<template>
    <div class="banner">
        <!-- 轮播图 -->
        <el-carousel height="620px">
            <el-carousel-item v-for="item in bannerlist" :key="item.id">
                <img :src="`http://101.42.51.171:9000/smart/image/${item.img_url}`" alt="">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script setup>
import { ref } from "vue";
let bannerlist = ref([
    { id: 1, img_url: 'banner-1.jpg' },
    { id: 2, img_url: 'banner-2.jpg' },
    { id: 3, img_url: 'banner-3.jpg' },
])
</script>

<style>
.banner img {
    width: 100%;
    /* height: 100%; */
    object-fit: cover;
    margin-top: 10px;
    border-radius: 30px;
    
}
.banner {
    width: 350px;
    height: 620px;
}
</style>